<template>
    <div>
    <!--头部-->
        <div class="header">
            <div class="info">
                <div class="information">
                    <div class="phone">
                        <img src="../images/phone.png">
                        <span style="margin-left:3px">{{phone}}</span>
                    </div>
                    <div class="envelope">
                        <img src="../images/envelope.png">
                        <span style="margin-left:3px">{{SMS}}</span>
                    </div>
                    <div class="positioning">
                        <img src="../images/icon_positioning.png">
                        <span style="margin-left:3px">{{add}}</span>
                    </div>
                </div>
            </div>
            <!--tab切换-->
            <div class="tab">
                <div class="logo">
                    <img src="../images/logo.png">
                </div>
                <div class="tabNav" v-for="(item,index) in navList" :key="index" @click="routerLink(index)">
                    <span :class=" navIndex === index ? 'item-cn-active' : 'item-cn'">{{item.name}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                phone:"13750276352",
                SMS:"1203066549@qq.com",
                add:"河源市庆丰西路639号智谷创意工业园301",
                navList:[
                    {
                        id:1,
                        name:"首页"
                    },
                    {
                        id:2,
                        name:"宠物品种"
                    },
                    {
                        id:3,
                        name:"宠物用品"
                    },
                    {
                        id:4,
                        name:"宠物资讯"
                    },
                    {
                        id:5,
                        name:"关于我们"
                    },
                    {
                        id:6,
                        name:"联系我们"
                    }
                ],
                navIndex:0
            }

        },
        methods:{
            routerLink(index){
                console.log(index,'iiiiiii')
                this.navIndex=index
            }
        }
    }
</script>
<style>
    .info{
        /*height: 40px;*/
        background: #f1ad48;
        padding-bottom: 9px;
    }
    .information{
        color: #ffffff;
        font-weight: 400;
        display: flex;
        padding-top: 9px;
        margin-left: 160px;
        flex-wrap:wrap;
    }
    .phone,.envelope,.positioning{
        display: flex;
        justify-items: center;
        align-items: center;
        margin-right: 30px;
    }
    .tab{
        background: #ffffff;
        height: 100px;
        display: flex;
        align-items: center;
        border-bottom: solid 1px rebeccapurple;
    }
    .logo{
        display: flex;
        align-items: center;
        margin-left: 100px;
        margin-right: 260px
    }
    .tabNav{
        font-size: 20px;
        color: #333;
        display: flex;
        flex-wrap:wrap;
    }
    .tabNav span{
        margin-right: 30px;
    }

    /*导航普通状态*/
    .item-cn {
        color:  #333;
    }
    .item-cn:hover{
        color: #f1ad48;
    }

    /*导航高亮*/
    .item-cn-active {
        border-bottom: solid 2px #7c4c4c
    }
    .item-cn-active:hover{
        color: #f1ad48;
    }
    .item-cn:after{
        content:'';
        display:block;
        /*开始时候下划线的宽度为100%*/
        width:100%;
        height:2px;
        position:relative;
        color: #f1ad48;
        background:#000;
        transition:all 0.3s ease-in-out;
        /*通过transform的缩放scale来让初始时x轴为0*/
        transform: scale3d(0,1,1);
        /*将坐标原点移到元素的中间，以原点为中心进行缩放*/
        transform-origin:50% 0;

    }
    .item-cn:hover:after{
        /*鼠标经过时还原到正常比例*/
        transform:scale3d(1,1,1);

    }

</style>
